<!--  -->
<template>
  <div class="information">
    <div class="inf-head">
      <div class="inf-tl">完善芝士信息</div>
      <div class="inf-tx">为了帮助我们定制适合您的内容，请选择填写以下信息</div>
      <div class="skip" @click="skip">跳过</div>
      <div class="yinhao"></div>
    </div>
    <div class="content">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="form.name"
            name="姓名"
            label="姓名"
            placeholder="请填写姓名"
          />
        </van-cell-group>
        <!-- 生日 -->
        <van-field
          v-model="ruleForm.birth"
          is-link
          readonly
          name="datePicker"
          label="生日"
          placeholder="点击选择时间"
          @click="brithShow = true"
        />
        <van-popup v-model:show="brithShow" position="bottom">
          <van-date-picker
            :min-date="minDate"
            :max-date="maxDate"
            v-model="currentDate"
            @confirm="successbirth"
            @cancel="brithShow = false"
          />
        </van-popup>
        <!-- 身份 -->
        <van-field
          v-model="ruleForm.identity"
          is-link
          readonly
          name="datePicker"
          label="身份"
          placeholder="请选择身份"
          @click="identityShow = true"
        />
        <van-popup v-model:show="identityShow" position="bottom">
          <van-picker
            :columns="identityList"
            @confirm="identitySuccess"
            @cancel="identityShow = false"
          />
        </van-popup>
        <!-- 院校 -->
        <van-field
          v-if="school.includes(isShowTypeCode)"
          v-model="ruleForm.school"
          is-link
          readonly
          name="datePicker"
          label="院校"
          placeholder="请选择院校"
          @click="schoolShow = true"
        />
        <van-popup v-model:show="schoolShow" position="bottom">
          <van-cascader
            v-model="form.school"
            title="请选择院校"
            :options="schoolOptions"
            @close="schoolShow = false"
            @change="schoolChange"
            @finish="schoolFinish"
          />
        </van-popup>
        <!-- 专业 -->
        <van-field
          v-if="major.includes(isShowTypeCode)"
          v-model="ruleForm.major"
          is-link
          readonly
          name="datePicker"
          label="专业"
          placeholder="请选择院校"
          @click="majorShow = true"
        />
        <van-popup v-model:show="majorShow" position="bottom">
          <van-cascader
            v-model="form.major"
            title="请选择专业"
            :options="majorOptions"
            @close="majorShow = false"
            @change="majorChange"
            @finish="majorFinish"
          />
        </van-popup>
        <!-- 学历 -->
        <van-field
          v-if="education.includes(isShowTypeCode)"
          v-model="ruleForm.education"
          is-link
          readonly
          name="datePicker"
          label="学历"
          placeholder="请选择学历"
          @click="educationShow = true"
        />
        <van-popup v-model:show="educationShow" position="bottom">
          <van-picker
            :columns="educationList"
            @confirm="educationSuccess"
            @cancel="educationShow = false"
          />
        </van-popup>
        <!-- 工作单位 -->
        <van-field
          v-if="company.includes(isShowTypeCode)"
          v-model="ruleForm.company"
          is-link
          readonly
          name="datePicker"
          label="工作单位"
          placeholder="请选择工作单位"
          @click="companyShow = true"
        />
        <van-popup v-model:show="companyShow" position="bottom">
          <van-picker
            v-if="isShowTypeCode === 'employees'"
            :columns="companyList"
            @confirm="companySuccess"
            @cancel="companyShow = false"
          />
          <van-cascader
            v-else
            v-model="form.company"
            title="请选择工作单位"
            :options="companyOptions"
            @close="companyShow = false"
            @change="companyChange"
            @finish="companyFinish"
          />
        </van-popup>
        <!-- 工作科室 -->
        <van-field
          v-if="department.includes(isShowTypeCode)"
          v-model="ruleForm.department"
          is-link
          readonly
          name="datePicker"
          label="科室"
          placeholder="请选择工作科室"
          @click="departmentShow = true"
        />
        <van-popup v-model:show="departmentShow" position="bottom">
          <van-cascader
            v-model="form.department"
            title="请选择工作科室"
            :options="departmentOptions"
            @close="departmentShow = false"
            @change="departmentChange"
            @finish="departmentFinish"
          />
        </van-popup>
        <!-- 工作年限 -->
        <van-field
          v-if="workYear.includes(isShowTypeCode)"
          v-model="ruleForm.workYear"
          is-link
          readonly
          name="datePicker"
          label="工作年限"
          placeholder="请选择工作年限"
          @click="workYearShow = true"
        />
        <van-popup v-model:show="workYearShow" position="bottom">
          <van-picker
            :columns="workYearList"
            @confirm="workYearSuccess"
            @cancel="workYearShow = false"
          />
        </van-popup>
        <!-- 职称 -->
        <van-field
          v-if="title.includes(isShowTypeCode)"
          v-model="ruleForm.title"
          is-link
          readonly
          name="datePicker"
          label="职称"
          placeholder="请选择工作职称"
          @click="titleShow = true"
        />
        <van-popup v-model:show="titleShow" position="bottom">
          <van-picker
            :columns="titleList"
            @confirm="titleSuccess"
            @cancel="titleShow = false"
          />
        </van-popup>
        <!-- 学科 -->
        <van-field
          v-if="subject.includes(isShowTypeCode)"
          v-model="ruleForm.subject"
          is-link
          readonly
          name="datePicker"
          label="爱好学科"
          placeholder="请选择学科"
          @click="subjectShow = true"
        />
        <van-popup v-model:show="subjectShow" position="bottom">
          <van-cascader
            v-model="form.subject"
            title="请选择学科"
            :options="subjectOptions"
            @close="subjectShow = false"
            @change="subjectShowChange"
            @finish="subjectShowFinish"
          />
        </van-popup>
        <!-- 证书 -->
        <van-field name="uploader" label="证书">
          <template #input>
            <van-uploader
              @delete="delUpload"
              :after-read="uploadSuccess"
              v-model="certificate"
              :max-count="1"
            />
          </template>
        </van-field>
        <p style="color: red">提示： {{ label }}</p>
        <p class="label">照片示例</p>
        <div class="example">
          <div class="item">
            <img src="~@/assets/images/id_success.png" alt="" />
            <p>标准图片</p>
          </div>
          <div class="item">
            <img src="~@/assets/images/id_error1.png" alt="" />
            <p>信息缺失</p>
          </div>
          <div class="item">
            <img src="~@/assets/images/id_error2.png" alt="" />
            <p>闪光强烈</p>
          </div>
          <div class="item">
            <img src="~@/assets/images/id_error3.png" alt="" />
            <p>照片模糊</p>
          </div>
        </div>
        <div class="btn" @click="onSubmit">提 交</div>
      </van-form>
    </div>
    <div class="tip-box" v-if="showTip">7天VIP会员已到账</div>
    <div class="tip-box" v-if="notInfo">获得奖励需完善全部信息</div>
    <div class="tip-box" v-if="errorTip">{{ errorTx }}</div>
  </div>
</template>

<script>
import { showToast } from "vant";
import OSS from "ali-oss";
export default {
  data() {
    return {
      label: "可选择学生证、毕业证任意一个",
      school: ["student", "teacher", "enthusiast"],
      subject: ["teacher", "enthusiast"],
      department: ["doctor", "nurse"],
      major: ["student"],
      education: ["student"],
      title: ["doctor", "nurse", "teacher"],
      company: ["doctor", "nurse", "employees"],
      workYear: ["doctor", "nurse"],
      identityList: [],
      form: {
        name: "",
        school: "",
        major: "",
        education: "",
        company: "",
        department: "",
        workYear: "",
        title: "",
        subject: "",
        certificate: "",
      },
      certificate: [],
      ruleForm: {
        name: "",
        birth: "",
        identity: null, // 身份
        school: null, // 院校
        major: null, // 专业
        education: null, // 学历
        nationalHospital: null, // 医院
        company: null, // 工作单位
        department: null, // 科室
        workYear: null, // 工作年限
        title: null, // 职称
        subject: null, // 学科
        certificate: null, // 证件路径
      },
      brithShow: false,
      identityShow: false,
      schoolShow: false,
      majorShow: false,
      educationShow: false,
      companyShow: false,
      departmentShow: false,
      workYearShow: false,
      titleShow: false,
      subjectShow: false,
      currentDate: [],
      isShowTypeCode: null,
      schoolOptions: [],
      majorOptions: [],
      educationList: [],
      companyOptions: [],
      departmentOptions: [],
      workYearList: [],
      titleList: [],
      subjectOptions: [],
      companyOptions: [],
      companyList: [],
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2022, 0, 1),
    };
  },
  components: {},
  mounted() {
    this.getUserGroup();
    this.getSchool();
    this.getMajor();
    this.getEducation();
    this.getdepartment();
    this.getworkYear();
    this.getSubject();
  },
  // watch: {
  //   schoolShow(val) {
  //     if (val) {
  //       this.getSchool()
  //     }
  //   }
  // },
  methods: {
    // getUserInfo() {
    //   this.$http
    //     .getUserInfor()
    //     .then((res) => {
    //
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    successbirth() {
      // console.log(this.ruleForm.birth)
      this.ruleForm.birth = this.currentDate.join("-");
      this.brithShow = false;
    },
    // 选择身份
    identitySuccess(value) {
      this.identityShow = false;
      this.ruleForm.identity = this.identityList[value.selectedIndexes[0]].text;
      this.form.identity = this.identityList[value.selectedIndexes[0]].id;
      this.isShowTypeCode = this.identityList[value.selectedIndexes[0]].code;
      this.getTitle(this.form.identity);
      this.ruleForm.company = "";
      this.form.company = "";
      if (
        this.isShowTypeCode === "doctor" ||
        this.isShowTypeCode === "nurse" ||
        this.isShowTypeCode === "teacher"
      ) {
        this.ruleForm.title = "";
        this.getcompany();
      } else {
        this.getProfess();
      }
      if (this.isShowTypeCode === "student") {
        this.label = "可选择学生证、毕业证任意一个";
      } else if (
        this.isShowTypeCode === "enthusiast" ||
        this.isShowTypeCode === "employees"
      ) {
        this.label = "可选择名片、工作证任意一个";
      } else {
        this.label = "可选择职业资格证书、职业医师证、工作证任意一个";
        this.isShowSubject = true;
      }
    },

    // 查询身份
    getUserGroup() {
      const params = { type: 4, pid: 0, page: 1, pageCnt: 99999 };
      this.$http
        .getUserRoleTag(params)
        .then((res) => {
          if (res.flag == 0) {
            this.identityList = res.data.list.map((item) => {
              return {
                ...item,
                text: item.name,
                value: item.id,
              };
            });
            this.form.identity = res.data.list[0].id;
            this.ruleForm.identity = res.data.list[0].name;
            this.isShowTypeCode = res.data.list[0].code;
            // this.identityList = res.data[0].tagInfos;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询院校
    getSchool(pid) {
      const data = {
        page: 1,
        pageCnt: 9999,
        type: 6,
        pid: pid || 0,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          if (!res.data.list.length) return (this.schoolShow = false);
          if (pid) {
            const index = this.schoolOptions.findIndex(
              (item) => item.id === this.form.school
            );
            if (index !== -1) {
              this.schoolOptions[index].children = res.data.list.map((item) => {
                return {
                  ...item,
                  text: item.name,
                  value: item.id,
                };
              });
            }
          } else {
            this.schoolOptions = res.data.list.map((item) => {
              return {
                ...item,
                text: item.name,
                value: item.id,
              };
            });
          }
        }
      });
    },
    schoolChange(value) {
      // console.log(value)
      this.getSchool(value.value);
    },
    schoolFinish(value) {
      // console.log(value)
      this.ruleForm.school = value.selectedOptions.pop().name;
    },
    // 查询专业
    getMajor(pid) {
      const data = {
        pid: pid || 0,
        type: 13,
        page: 1,
        pageCnt: 9999,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          if (!res.data.list.length) return (this.majorShow = false);
          if (pid) {
            const index = this.majorOptions.findIndex(
              (item) => item.id === this.form.major
            );
            if (index !== -1) {
              this.majorOptions[index].children = res.data.list.map((item) => {
                return {
                  ...item,
                  text: item.name,
                  value: item.id,
                };
              });
            }
          } else {
            this.majorOptions = res.data.list.map((item) => {
              return {
                ...item,
                text: item.name,
                value: item.id,
              };
            });
          }
        }
      });
    },
    majorChange(value) {
      // console.log(value)
      this.getMajor(value.value);
    },
    majorFinish(value) {
      // console.log(value)
      this.ruleForm.major = value.selectedOptions.pop().name;
    },
    // 查询学历
    getEducation() {
      const data = {
        page: 1,
        pageCnt: 9999,
        type: 10,
        pid: 0,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          this.educationList = res.data.list.map((item) => {
            return {
              ...item,
              text: item.name,
              value: item.id,
            };
          });
        }
      });
    },
    educationSuccess(value) {
      this.educationShow = false;
      this.ruleForm.education =
        this.educationList[value.selectedIndexes[0]].text;
      this.form.education = this.educationList[value.selectedIndexes[0]].id;
    },
    // 查询工作单位
    getcompany(pid) {
      const data = {
        pid: pid || 0,
        type: 7,
        page: 1,
        pageCnt: 9999,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          if (!res.data.list.length) return (this.companyShow = false);
          if (pid) {
            const index = this.companyOptions.findIndex(
              (item) => item.id === this.form.company
            );
            if (index !== -1) {
              this.companyOptions[index].children = res.data.list.map(
                (item) => {
                  return {
                    ...item,
                    text: item.name,
                    value: item.id,
                  };
                }
              );
            } else {
              this.companyOptions.forEach((item) => {
                if (item.children && item.children.length) {
                  const index = item.children.findIndex(
                    (key) => key.id === this.form.company
                  );
                  if (index !== -1) {
                    item.children[index].children = res.data.list.map(
                      (item) => {
                        return {
                          ...item,
                          text: item.name,
                          value: item.id,
                        };
                      }
                    );
                  }
                }
              });
            }
          } else {
            this.companyOptions = res.data.list.map((item) => {
              return {
                ...item,
                text: item.name,
                value: item.id,
              };
            });
          }
        }
      });
    },
    companyChange(value) {
      // console.log(value)
      this.getcompany(value.value);
    },
    companyFinish(value) {
      // console.log(value)
      this.ruleForm.company = value.selectedOptions.pop().name;
    },
    getProfess() {
      const data = {
        page: 1,
        pageCnt: 9999,
        type: 8,
        pid: 0,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          this.companyList = res.data.list.map((item) => {
            return {
              ...item,
              text: item.name,
              value: item.id,
            };
          });
        }
      });
    },
    companySuccess(value) {
      this.companyShow = false;
      this.ruleForm.company = this.companyList[value.selectedIndexes[0]].text;
      this.form.company = this.companyList[value.selectedIndexes[0]].id;
    },
    // 查询工作科室
    getdepartment(pid) {
      const data = {
        pid: pid || 0,
        type: 11,
        page: 1,
        pageCnt: 9999,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          if (!res.data.list.length) return (this.departmentShow = false);
          if (pid) {
            const index = this.departmentOptions.findIndex(
              (item) => item.id === this.form.department
            );
            if (index !== -1) {
              this.departmentOptions[index].children = res.data.list.map(
                (item) => {
                  return {
                    ...item,
                    text: item.name,
                    value: item.id,
                  };
                }
              );
            } else {
              this.departmentOptions.forEach((item, i) => {
                if (item.children && item.children.length) {
                  const index = item.children.findIndex(
                    (key) => key.id === this.form.department
                  );
                  if (index !== -1) {
                    item.children[index].children = res.data.list.map(
                      (item) => {
                        return {
                          ...item,
                          text: item.name,
                          value: item.id,
                        };
                      }
                    );
                  }
                }
              });
            }
          } else {
            this.departmentOptions = res.data.list.map((item) => {
              return {
                ...item,
                text: item.name,
                value: item.id,
              };
            });
          }
        }
      });
    },
    departmentChange(value) {
      // console.log(value)
      this.getdepartment(value.value);
    },
    departmentFinish(value) {
      // console.log(value)
      this.ruleForm.department = value.selectedOptions.pop().name;
    },
    // 查询工作年限
    getworkYear() {
      const data = {
        page: 1,
        pageCnt: 9999,
        type: 12,
        pid: 0,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          this.workYearList = res.data.list.map((item) => {
            return {
              ...item,
              text: item.name,
              value: item.id,
            };
          });
        }
      });
    },
    workYearSuccess(value) {
      this.workYearShow = false;
      this.ruleForm.workYear = this.workYearList[value.selectedIndexes[0]].text;
      this.form.workYear = this.workYearList[value.selectedIndexes[0]].id;
    },
    // 查询职称
    getTitle(pid) {
      const data = {
        page: 1,
        pageCnt: 9999,
        type: 4,
        pcode: "zc",
        pid,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          this.titleList = res.data.list.map((item) => {
            return {
              ...item,
              text: item.name,
              value: item.id,
            };
          });
        }
      });
    },
    titleSuccess(value) {
      this.titleShow = false;
      this.ruleForm.title = this.titleList[value.selectedIndexes[0]].text;
      this.form.title = this.titleList[value.selectedIndexes[0]].id;
    },
    // 查询学科
    getSubject(pid) {
      const data = {
        page: 1,
        pageCnt: 9999,
        type: 14,
        pid: pid || 0,
      };
      this.$http.getUserRoleTag(data).then((res) => {
        if (res.flag === 0) {
          if (!res.data.list.length) return (this.subjectShow = false);
          if (pid) {
            const index = this.subjectOptions.findIndex(
              (item) => item.id === this.form.subject
            );
            if (index !== -1) {
              this.subjectOptions[index].children = res.data.list.map(
                (item) => {
                  return {
                    ...item,
                    text: item.name,
                    value: item.id,
                  };
                }
              );
            }
          } else {
            this.subjectOptions = res.data.list.map((item) => {
              return {
                ...item,
                text: item.name,
                value: item.id,
              };
            });
          }
        }
      });
    },
    subjectShowChange(value) {
      // console.log(value)
      this.getSubject(value.value);
    },
    subjectShowFinish(value) {
      // console.log(value)
      this.ruleForm.subject = value.selectedOptions.pop().name;
    },
    skip() {
      // this.$router.go(-1);
      this.goBack();
    },
    goBack() {
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      const path =
        userInfo.idx == 1
          ? "/"
          : userInfo.idx == 2
          ? "/morphology"
          : userInfo.idx == 5
          ? "/anatomyDetail"
          : "/question";
      if (userInfo.idx == 4) {
        this.$router.go(-1);
      } else {
        this.$router.push({
          path: path,
          query: {
            actionType: this.$route.query.actionType || null,
            invitationCode: this.$route.query.invitationCode || null,
            type: this.$route.query.type || null,
          },
        });
      }
    },
    // save() {
    //   if (
    //     this.saveQuery.name == "" ||
    //     this.saveQuery.profession == "" ||
    //     this.saveQuery.job == "" ||
    //     this.saveQuery.organization == ""
    //   ) {
    //     this.notInfo = true;
    //     setTimeout(() => {
    //       this.notInfo = false;
    //     }, 1500);
    //   } else {
    //     this.$http
    //       .putMyInformation(this.saveQuery)
    //       .then((res) => {
    //         if (res.flag == 0) {
    //           if (res.data == 1) {
    //             this.showTip = true;
    //           }
    //           setTimeout(() => {
    //             this.goBack();
    //           }, 1500);
    //         }
    //       })
    //       .catch((err) => {
    //         this.errorTx = err.response.data.message;
    //         this.errorTip = true;
    //         setTimeout(() => {
    //           this.errorTip = false;
    //         }, 1500);
    //       });
    //   }
    // },
    // chooseIdentity(idx) {
    //   this.saveQuery.profession = this.identityList[idx].name;
    //   this.showSlide = false;
    // },
    // cannel() {
    //   this.showSlide = false;
    // },
    uploadSuccess(file) {
      this.$http.ossUploadParameter().then((res) => {
        const { region, accessKeyId, accessKeySecret, securityToken, bucket } =
          res.data;
        let client = new OSS({
          region,
          accessKeyId,
          accessKeySecret,
          stsToken: securityToken,
          bucket: bucket,
        });

        const timeStamp = new Date().getTime();
        const name = timeStamp + "." + file.file.name.split(".").pop();
        const fileName = "/resource/" + name;
        this.singleUpload(fileName, file.file, client);
      });
    },
    singleUpload(fileName, file, client) {
      // console.log(file)
      client.put(fileName, file).then((res) => {
        this.form.certificate = res.url.split("?")[0].split("com").pop();
      });
    },
    delUpload() {
      // console.log(212)
      this.form.certificate = "";
    },
    // 提交
    onSubmit() {
      console.log(this.form);
      if (!this.form.name || !this.ruleForm.birth || !this.form.certificate) {
        return showToast("请完善信息");
      }
      if (this.isShowTypeCode === "student") {
        if (!this.form.school || !this.form.major || !this.form.education) {
          return showToast("请完善信息");
        }
      }
      if (this.identityShow === "doctor" || this.isShowTypeCode === "nurse") {
        this.form.nationalHospital = this.form.company;
        if (
          !this.form.company ||
          !this.form.department ||
          !this.form.workYear ||
          !this.form.title
        ) {
          return showToast("请完善信息");
        }
      }
      if (this.isShowTypeCode === "teacher") {
        if (!this.form.school || !this.form.subject || !this.form.title) {
          return showToast("请完善信息");
        }
      }
      if (this.isShowTypeCode === "enthusiast") {
        if (!this.form.school || !this.form.subject) {
          return showToast("请完善信息");
        }
      }
      if (this.isShowTypeCode === "employees") {
        if (!this.form.company) {
          return showToast("请完善信息");
        }
      }
      const data = {
        ...this.form,
        birthDate: new Date(this.ruleForm.birth).getTime(),
      };
      this.$http
        .userAuthInfo(data)
        .then((res) => {
          if (res.flag === 0) {
            showToast("已提交");
            this.goBack();
          } else {
            showToast(res.message);
          }
        })
        .catch((err) => {
          showToast(err.response.data.message);
        });
    },
  },
};
</script>
<style>
.van-field__control {
  font-size: 0.32rem !important;
}
.van-field__label {
  font-size: 0.32rem !important;
}
#van-field-5-label {
}
#van-field-1-label,
#van-field-2-label,
#van-field-3-label,
#van-field-4-label,
#van-field-5-label,
#van-field-6-label,
#van-field-7-label {
  font-size: 0.32rem !important;
}
.van-ellipsis {
  font-size: 0.32rem !important;
}
.van-cell-group--inset {
  margin: 0 !important;
}
.van-cascader__option {
  font-size: 0.32rem !important;
}
.van-form {
  font-size: 0.32rem !important;
}

.van-cell {
  padding-left: unset !important;
  padding-right: unset !important;
  font-size: 0.32rem !important;
}
</style>
<style lang="scss" scoped>
.btn {
  height: 0.96rem;
  text-align: center;
  line-height: 0.96rem;
  border-radius: 99px;
  background: #ff9514;
  color: #fff;
  margin: 0.64rem 0;
  font-size: 0.32rem;
}

.content {
  padding: 0 0.32rem;
  font-size: 0.32rem !important;
}

.label {
  margin: 0.6rem 0;
  color: #333333;
  font-size: 0.28rem;
}

.example {
  display: flex;
  align-items: center;
  margin-top: 0.32rem;

  .item {
    width: 25%;
    padding-right: 0.1rem;

    &:last-child {
      padding-right: 0;
    }

    img {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    p {
      text-align: center;
      color: #666666;
      font-size: 0.24rem;
      margin-top: 0.12rem;
    }
  }
}
</style>
